<template>
  <div class="login">
    <div class="login-wrap">
      <h1 class="login-wrap-tit">公证链数据共享服务平台</h1>
      <el-radio-group class="login-wrap-check" size="small" v-model="loginActive">
        <el-radio-button label="login">登录</el-radio-button>
        <el-radio-button label="reg">注册</el-radio-button>
      </el-radio-group>
      <div class="login-wrap-content">
        <div class="login-wrap_login" v-if="loginActive === 'login'">
          <el-form label-position="left">
            <el-form-item size="small" label="手机号" label-width="90px" :rules="[{ required: true }]">
              <el-input v-model="userLogin.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="90px" :rules="[{ required: true }]">
              <el-input size="small" type="password" v-model="userLogin.password"></el-input>
            </el-form-item>
            <el-form-item label-width="90px" class="login-btn">
              <el-button size="small" type="primary" @click="handLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-wrap_reg" v-if="loginActive === 'reg'">
          <el-form label-position="left">
            <el-form-item label="手机号" label-width="90px" :rules="[{ required: true }]">
              <el-input size="small" v-model="userReg.phone"></el-input>
            </el-form-item>
            <el-form-item label="姓名" label-width="90px" :rules="[{ required: true }]">
              <el-input size="small" v-model="userReg.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证" label-width="90px" :rules="[{ required: true }]">
              <el-input size="small" v-model="userReg.idCard"></el-input>
            </el-form-item>
            <el-form-item label="所属机构" label-width="90px">
              <company-choose @selected='companySelected'></company-choose>
            </el-form-item>
            <el-form-item label="用户类型" label-width="90px" :rules="[{ required: true }]">
              <usertype-choose :defaultVal='userReg.type' purpose='isReg' @change='usertypeChange'></usertype-choose>
            </el-form-item>
            <el-form-item label="密码" label-width="90px" :rules="[{ required: true }]">
              <el-input size="small" type="password" v-model="userReg.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" label-width="90px" :rules="[{ required: true }]">
              <el-input size="small" type="password" v-model="userReg.rePassword"></el-input>
            </el-form-item>
            <el-form-item label-width="90px" class="login-btn">
              <el-button size="small" type="primary" @click="handReg">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { defineComponent, reactive, ref } from 'vue';
import { CompanyChoose, UsertypeChoose } from '@/components';
import { REG_EXP } from '@/config'

export default defineComponent({
  name: 'login',
  components: { CompanyChoose, UsertypeChoose },
  setup() {
    interface UserLogin {
      phone: string;
      password: string;
    }
    interface UserReg {
      name: string;
      idCard: string;
      phone: string;
      type: string;
      company: string;
      password: string;
      rePassword: string;
    }
    const store = useStore();
    let loginActive = ref<string>('login');
    const userLogin = reactive<UserLogin>({
      phone: '',
      password: '',
    });
    const userReg = reactive<UserReg>({
      name: '',
      idCard: '',
      phone: '',
      type: '',
      company: '',
      password: '',
      rePassword: '',
    });
    const handLogin = async () => {
      const { phone, password } = userLogin;
      if (!phone || !password) {
        ElMessage.warning('请完善登录信息!');
        return;
      }
      await store.dispatch('user/userLogin', userLogin);
    };
    const handReg = async () => {
      const noCheck = ['company'];
      for (const item in userReg) {
        if (!userReg[item] && !noCheck.includes(item)) {
          ElMessage.warning('请完善注册信息!');
          return;
        }
      }
      if (!(REG_EXP.phone.test(userReg.phone))) {
        ElMessage.warning('请输入正确的手机号!');
        return;
      }
      if (!(REG_EXP.idCard.test(userReg.idCard))) {
        ElMessage.warning('请输入正确的身份证号!');
        return;
      }
      if (userReg.password !== userReg.rePassword) {
        ElMessage.warning('两次密码输入不一致!');
        return;
      }
      await store.dispatch('user/userReg', userReg);
      ElMessage.success('注册成功！请登录');
      Object.keys(userReg).forEach((item) => {
        userReg[item] = '';
      });
      loginActive.value = 'login';
    };
    const companySelected = (data) => {
      userReg.company = data;
    };
    const usertypeChange = (data) => {
      userReg.type = data;
    };
    return {
      loginActive,
      userLogin,
      userReg,
      companySelected,
      usertypeChange,
      handLogin,
      handReg,
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  float: left;
  background: url('@/assets/login_bg.svg');
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
  &-wrap {
    width: 360px;
    height: auto;
    margin: 150px auto 0px;
    padding: 10px 30px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 1%);
    border: rgb(0, 0, 0, 9%) solid 1px;
    border-radius: 5px;
    &-tit {
      font-weight: normal;
      font-size: 26px;
      line-height: 60px;
      text-align: center;
    }
    &-check {
      display: block;
      text-align: center;
      margin: 30px auto;
    }
  }
  .login-btn {
    text-align: right;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
